// 颜色变量
@primary-color: #2196f3;
@primary-hover: #1976d2;
@primary-light: #e3f2fd;
@primary-dark: #0d47a1;

@success-color: #4caf50;
@success-hover: #45a049;
@success-light: #e8f5e8;
@success-dark: #2e7d32;

@warning-color: #ff9800;
@warning-hover: #f57c00;
@warning-light: #fff3e0;
@warning-dark: #e65100;

@danger-color: #f44336;
@danger-hover: #d32f2f;
@danger-light: #ffebee;
@danger-dark: #c62828;

@info-color: #2196f3;
@info-hover: #1976d2;
@info-light: #e3f2fd;
@info-dark: #0d47a1;

// 文本颜色
@text-primary: #333;
@text-secondary: #666;
@text-light: #999;
@text-white: #fff;
@text-muted: #7f8c8d;

// 背景颜色
@bg-primary: #fff;
@bg-secondary: #f8f9fa;
@bg-light: #fafafa;
@bg-dark: #2c3e50;
@bg-overlay: rgba(0, 0, 0, 0.5);

// 边框颜色
@border-color: #ddd;
@border-light: #e9ecef;
@border-dark: #adb5bd;

// 阴影
@shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
@shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
@shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);

// 圆角
@border-radius-xs: 4px;
@border-radius-sm: 8px;
@border-radius: 12px;
@border-radius-lg: 16px;
@border-radius-xl: 20px;
@border-radius-full: 50%;

// 间距
@spacing-xs: 4px;
@spacing-sm: 8px;
@spacing: 16px;
@spacing-md: 24px;
@spacing-lg: 32px;
@spacing-xl: 40px;
@spacing-2xl: 60px;

// 字体大小
@font-size-xs: 0.75rem;
@font-size-sm: 0.875rem;
@font-size: 1rem;
@font-size-md: 1.125rem;
@font-size-lg: 1.25rem;
@font-size-xl: 1.5rem;
@font-size-2xl: 2rem;
@font-size-3xl: 2.5rem;

// 字体粗细
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-semibold: 600;
@font-weight-bold: 700;

// 行高
@line-height-tight: 1.25;
@line-height-normal: 1.5;
@line-height-relaxed: 1.75;

// 断点
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
@breakpoint-2xl: 1400px;

// 混合器
.transition(@property: all, @duration: 0.3s, @timing: ease) {
  transition: @property @duration @timing;
}

.transition-fast(@property: all, @duration: 0.2s, @timing: ease) {
  transition: @property @duration @timing;
}

.transition-slow(@property: all, @duration: 0.5s, @timing: ease) {
  transition: @property @duration @timing;
}

.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between() {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column() {
  display: flex;
  flex-direction: column;
}

.flex-wrap() {
  display: flex;
  flex-wrap: wrap;
}

.shadow() {
  box-shadow: @shadow;
}

.shadow-sm() {
  box-shadow: @shadow-sm;
}

.shadow-md() {
  box-shadow: @shadow-md;
}

.shadow-lg() {
  box-shadow: @shadow-lg;
}

.border-radius(@radius: @border-radius) {
  border-radius: @radius;
}

.text-center() {
  text-align: center;
}

.text-left() {
  text-align: left;
}

.text-right() {
  text-align: right;
}

// 按钮混合器
.btn-base() {
  padding: @spacing-sm @spacing;
  border: none;
  border-radius: @border-radius-sm;
  font-weight: @font-weight-semibold;
  cursor: pointer;
  .transition();
  text-decoration: none;
  display: inline-block;
}

.btn-primary() {
  .btn-base();
  background: @primary-color;
  color: @text-white;

  &:hover {
    background: @primary-hover;
    transform: translateY(-2px);
  }
}

.btn-success() {
  .btn-base();
  background: @success-color;
  color: @text-white;

  &:hover {
    background: @success-hover;
    transform: translateY(-2px);
  }
}

.btn-danger() {
  .btn-base();
  background: @danger-color;
  color: @text-white;

  &:hover {
    background: @danger-hover;
    transform: translateY(-2px);
  }
}

.btn-secondary() {
  .btn-base();
  background: @bg-secondary;
  color: @text-primary;
  border: 1px solid @border-color;

  &:hover {
    background: @border-color;
    color: @text-primary;
  }
}

// 卡片混合器
.card() {
  background: @bg-primary;
  border-radius: @border-radius;
  box-shadow: @shadow;
  padding: @spacing-lg;
}

.card-hover() {
  .card();
  .transition();

  &:hover {
    transform: translateY(-4px);
    box-shadow: @shadow-md;
  }
}

// 输入框混合器
.input-base() {
  padding: @spacing-sm @spacing;
  border: 1px solid @border-color;
  border-radius: @border-radius-sm;
  background: @bg-primary;
  .transition();

  &:focus {
    outline: none;
    border-color: @primary-color;
    box-shadow: 0 0 0 3px fade(@primary-color, 10%);
  }
}

// 响应式混合器
.responsive(@breakpoint, @content) {
  @media (max-width: @breakpoint) {
    @content();
  }
}

.mobile(@content) {
  .responsive(@breakpoint-md, @content);
}

.tablet(@content) {
  .responsive(@breakpoint-lg, @content);
}

.desktop(@content) {
  .responsive(@breakpoint-xl, @content);
}
